<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>$.colorInput</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="jquery.colorInput.js"></script>
    <script type="text/javascript">
        // defaults
        $.colorInput.defaults.cells = 20;
        $.colorInput.defaults.cellSize = 9;
        $.colorInput.defaults.hueWidth = 22;
        $.colorInput.defaults.hideInput = false;
        $.colorInput.defaults.hoverSelect = false;
        $.colorInput.defaults.cancelOnClick = []; // default is [document]
        $.colorInput.defaults.acceptCancelButtons = true;
        $.colorInput.defaults.showLeft = false;
        $.colorInput.defaults.noHash = true;
        $.colorInput.defaults.minBrightness = .4;
        $.colorInput.defaults.maxBrightness = .8;
        $.colorInput.defaults.minSaturation = .4;
        $.colorInput.defaults.maxSaturation = 1

        $(document).ready(function() {
            // set up the color input
            var $input = $("#Color1").colorInput({
                change: function() {
                    $("#Status").text("changed ".concat(this.value));
                },
                colorSelected: function(e) {
                    $("#Status").text("selected ".concat(this.value));
                }
            });
            // set up second one hiding the input
            var $input = $("#Color2").colorInput({
                change: function() {
                    $("#Status").text("changed ".concat(this.value));
                },
                colorSelected: function(e) {
                    $("#Status").text("selected ".concat(this.value));
                },
                hideInput:true
            });

            // check with user if they want to keep the selection
            $(document).click(function(e) {
                if ($.colorInput.current) {
                    if ($.colorInput.current.isChanged
                            && window.confirm("Accept selected colour change?")) {
                        $.colorInput.current.accept();
                    } else {
                        $.colorInput.current.cancel();
                    }
                }
            });
            
            $("#HoverSelect").click(function(){
                $.colorInput.defaults.hoverSelect = this.checked;        
            });
        });
   
    </script>


    <link type="text/css" href="jquery-ui-css-framework/ui.core.css" rel="stylesheet" />
    <link type="text/css" href="jquery-ui-css-framework/ui.theme.css" rel="stylesheet" />
    <style type="text/css" >
        form p{overflow:visible;padding-left:95px;line-height:1.5em}
        form label{height:21px;margin:0 5px 0 5px;padding:0}
        form label.row{float:left;width:89px;margin-left:-94px;text-align:right;padding-top:0}
        .text{padding:.2em .3em}
    </style>
</head>
<body>
    <form>
        <h1>jQuery.colorInput test</h1>
        <div id="#StatusContainer"><p id="Status">Status</p></div>
        <p>
            <label for="Color1" class="row">Colour 1</label>
            <input id="Color1" value="#336699" class="text" size='6' />
        </p>
        <p>
            <label for="Color2" class="row">Colour 2</label>
            <input id="Color2" value="#996633" class="text" size='6' />
        </p>
        <p>Please select colours above</p>
        <p>
            <label for="HoverSelect" class="row">Hover Select</label>
            <input id="HoverSelect" type="checkbox" />
        </p>
    </form>    
</body>
</html>
